<template>
    <div class='head'>
        <div style='widht:100%; height:89%; overflow: auto;'>
            <div style='display:flex; justify-content: end;'>
            </div>
            <el-table height="96%"  :data="this.$store.state.question_Data" style="width: 100%">
                <el-table-column prop="q_type" label="题型（必选）" width="120" />
                <el-table-column prop="q_title" label="题干（必填）" width="580" />
                <el-table-column prop="a_correct" label="答案（必填）"  width="180"/>
                <el-table-column  prop="answers[0].a_item" label="选项A"  />
                <el-table-column  prop="answers[1].a_item" label="选项B"  />
                <el-table-column  prop="answers[2].a_item" label="选项C"  />
                <el-table-column  prop="answers[3].a_item" label="选项D"  />
                <el-table-column fixed="right" label="操作"  width="180">
                    <template #default="scope">
                        <div style='display:flex;'>
                            <el-button type="primary" @click='modify(scope.$index, scope.row)'>修改</el-button>
                            <el-button type="danger" @click='deleteData(scope.$index, scope.row)'>删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style='display: flex; justify-content: center;'>
            <el-pagination background layout="prev, pager, next" :total="this.$store.state.questionsSize" @current-change="handleCurrentChange" />
        </div>
        <el-drawer
            v-model="drawer"
            title="I am the title"
            :direction="direction"
            :before-close="handleClose"
        >
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="题型(必填)">
                    <el-select
                        style='width: 150px;'
                        v-model="formInline.q_type"
                        placeholder="题型(必填)"
                        clearable
                    >
                        <el-option label="多选题" value="1" />
                        <el-option label="判断题" value="2" />
                        <el-option label="单选题" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="题干(必填)">
                    <el-input v-model="formInline.q_title"  style="width: 300px; height: 280px;" :rows="12" type="textarea" placeholder="Please input" />
                </el-form-item>
               <el-form-item label="选择A">
                    <el-input v-model="formInline.A_data"  style="width: 300px;" :rows="2" type="textarea" placeholder="请输入选项A答案" />
                </el-form-item>
                <el-form-item label="选择B">
                    <el-input v-model="formInline.B_data"  style="width: 300px;" :rows="2" type="textarea" placeholder="请输入选项B答案" />
                </el-form-item>
                <el-form-item label="选择C">
                    <el-input v-model="formInline.C_data"  style="width: 300px;" :rows="2" type="textarea" placeholder="请输入选项C答案" />
                </el-form-item>
                <el-form-item label="选择D">
                    <el-input v-model="formInline.D_data"  style="width: 300px;" :rows="2" type="textarea" placeholder="请输入选项D答案" />
                </el-form-item>
                <el-form-item label="正确答案">
                    <el-select
                        style='width: 150px;'
                        v-model="formInline.a_correct"
                        placeholder="题型(必填)"
                        clearable
                    >
                        <el-option label="A" value="A" />
                        <el-option label="B" value="B" />
                        <el-option label="C" value="C" />
                        <el-option label="D" value="D" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
   components: {},
    data() {
        return {
            paramId : '',
            drawer: false,
            pages:1,
            TimeData:[],
            formInline: {
                q_title:'',
                q_type:'',
                B_data:'',
                A_data:'',
                C_data:'',
                D_data:'',
                answers:[],
                a_correct:'',
                q_id:'',
            },
            Type_question:[],
        };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('----输出id----')
        console.log(this.$route.params.id)
        this.paramId = this.$route.params.id
        this.$store.dispatch('query_subject')
        this.get('/kind/').then(res=>{
            if(res.code == 200){
                console.log('---------------')
                this.TimeData = res.data
                console.log(res.data)
                this.Type_question = res.data
                console.log(res.data[0])
                this.huixian()
                console.log('---------------')

            }
        })
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 页面初始化显示
        huixian(){
            this.get('/question/'+this.pages+'?size=10&kind_id='+this.paramId).then(res=>{
                if(res.code == 200){
                    console.log(res)
                    this.$store.state.questionsSize = res.page.pages
                    res.page.records.forEach((item)=>{
                        item.answers = item.answers.filter(item => item.a_item != "C.undefined" )
                        item.answers = item.answers.filter(item => item.a_item != "D.undefined" )
                    })
                    this.$store.state.question_Data = res.page.records
                    this.$store.state.question_Data.forEach((item,index) =>{
                        if(item.q_type == 1){
                            item.q_type = '多选题'
                        }if(item.q_type == 2){
                            item.q_type = '判断题'
                        }if(item.q_type == 0){
                            item.q_type = '单选题'
                        }
                    })
                }
            })
        },
        Option_changes() {
            this.paramId = this.Type_question.kind_id
            this.get('/question/'+this.pages+'?size=10&kind_id='+this.paramId).then(res=>{
                if(res.code == 200){
                    console.log(res)
                    this.$store.state.questionsSize = res.page.pages
                    res.page.records.forEach((item)=>{
                        item.answers = item.answers.filter(item => item.a_item != "C.undefined" )
                        item.answers = item.answers.filter(item => item.a_item != "D.undefined" )
                    })
                    this.$store.state.question_Data = res.page.records
                    this.$store.state.question_Data.forEach((item,index) =>{
                        if(item.q_type == 1){
                            item.q_type = '多选题'
                        }if(item.q_type == 2){
                            item.q_type = '判断题'
                        }if(item.q_type == 0){
                            item.q_type = '单选题'
                        }
                    })
                }
            })
        },
        deleteData(index, row){
            this.post('/question/del/'+row.q_id).then(res=>{
                if(res.code == 200){
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    this.$store.dispatch('query_subject')
                }
            })
        },
        modify(index, row){
            this.drawer = true
            this.formInline.q_id = row.q_id
            this.formInline.q_title = row.q_title
            this.formInline.q_type = row.q_type
            this.formInline.A_data = row.answers[0].a_item
            this.formInline.B_data = row.answers[1].a_item
            this.formInline.C_data = row.answers[2].a_item
            this.formInline.D_data = row.answers[3].a_item
            this.formInline.aid = row.answers[0].a_id
            this.formInline.bid = row.answers[1].a_id
            this.formInline.cid = row.answers[2].a_id
            this.formInline.did = row.answers[3].a_id
        },
        onSubmit() {
            if(this.formInline.q_type == '多选题'){
                this.formInline.q_type = 1
            }else if(this.formInline.q_type == '判断题'){
                this.formInline.q_type = 2
            }else if(this.formInline.q_type == '单选题'){
                this.formInline.q_type = 0
            }
            this.formInline.answers.push({
                'a_correct':this.formInline.a_correct == 'A'? 1:'',
                'a_item':this.formInline.A_data,
                'a_id':this.formInline.aid
            },{
                'a_item':this.formInline.B_data,
                'a_correct':this.formInline.a_correct == 'B'? 1:'',
                'a_id':this.formInline.bid
            },{
                'a_item':this.formInline.C_data,
                'a_correct':this.formInline.a_correct == 'C'? 1:'',
                'a_id':this.formInline.cid
            },{
                'a_item':this.formInline.D_data,
                'a_correct':this.formInline.a_correct == 'D'? 1:'',
                'a_id':this.formInline.did
            })
            this.post("/question/modify",JSON.stringify(this.formInline)).then(res=>{
                if(res.code == 200){
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.$store.dispatch('query_subject',this.pages)
                    this.drawer = false
                }
            })
        },
        handleCurrentChange(val){
            this.pages = val
            // this.$store.dispatch('query_subject',this.pages)
            this.Option_changes()
        }
    },

//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.demo-form-inline{
    width: 320px;
}
.head{
    width: 100%;
    height: 94%;
}
</style>